<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>相对定位与绝对定位</title>
		<style type="text/css">
			body {
				width:960px;
				margin: 0 auto;
				font-family: 微软雅黑;
				font-size: 18px;
				line-height: 1.8em;
			}
			div {
				width: 300px;
				float: left;
			}
			.relative {
				position: relative;
				top:150px;
			}
			.absolute {
				position: absolute;
				top:150px;
			}
			.bg {
				background-color: #fcc;
			}
		</style>
	</head>
	<body>
		<div>
			<h2>正常信息流</h2>
			<p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
			<p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
			<p class="bg">我正忙着算账，一小时一小时在那里加叠数字。</p>
			<p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了!"</p>
			<p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
		</div>
		<div>
			<h2>相对定位</h2>
			<p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
			<p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
			<p class="bg relative">我正忙着算账，一小时一小时在那里加叠数字。</p>
			<p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了!"</p>
			<p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
			<code>.relative {	position: relative; top:150px;}</code>
		</div>
		<div>
			<h2>绝对定位</h2>
			<p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
			<p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
			<p class="bg absolute">我正忙着算账，一小时一小时在那里加叠数字。</p>
			<p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了!"</p>
			<p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
			<code>.absolute {
				position: absolute;
				top:150px;}
			</code>
		</div>
	</body>
</html>